<template>
    <Content id="users">
        <div slot="search">
            <Search :model="search" :elem="searchElem" :btn-loading="list.loading" @on-search="handleDataList" />
        </div>
        <!-- Search -->
        <div slot="extra">
            <Button icon="md-add" @click="handleCreate"> Create </Button>
        </div>
        <!-- extra -->
        <div v-if="toolbar.number" class="toolbar">
            <span class="number"> Selected {{ toolbar.number }} items </span>
            <Button type="error" icon="md-trash" @click="handleBatchRemove"> Remove </Button>
        </div>
        <!-- .toolbar -->
        <ITable ref="list" stripe :columns="columns" :loading="list.loading" :data="list.data" :total="list.total" @on-page-change="handleDataList" @on-selection-change="handleSelectionChange" />
        <!-- ITable -->
        <SystemEdit ref="edit" @on-update="handleDataList" />
        <!-- UserEdit -->
    </Content>
</template>
<script>
    import {
        _batchDelUser, // 批量删除
        _delUser, // 删除
        _getUserList // 列表
    } from "@/services/manage/users";
    import SystemEdit from "./SystemEdit";
    export default {
        name: "System",
        components: {
            SystemEdit
        },
        data() {
            return {
                // 工具条(批量删除)
                toolbar: {
                    ids: [], // ID数组
                    number: 0 // 选择数量
                },
                // 表单数据
                search: {
                    name: ""
                },
                // 列表属性
                list: {
                    data: [], // 结构化数据
                    total: 0, // 数据总数
                    loading: false // 加载状态
                },
                // 表单元素
                searchElem: [
                    {
                        // label: 'Name',
                        prop: "name",
                        placeholder: "Search Name",
                        icon: "md-search"
                    }
                ],
                // 表格列的配置描述
                columns: [
                    {
                        type: "selection",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "Name",
                        key: "name",
                        minWidth: 120
                    },
                    {
                        title: "Age",
                        key: "age",
                        minWidth: 80
                    },
                    {
                        title: "Gender",
                        key: "gender",
                        minWidth: 80,
                        render: (h, params) =>
                            h("span", params.row.gender === 1 ? "Male" : "Female")
                    },
                    {
                        title: "E-mail",
                        key: "email",
                        minWidth: 120
                    },
                    {
                        title: "City",
                        key: "city",
                        minWidth: 100,
                        render: (h, params) => {
                            let city = params.row.city;
                            for (const key of Object.keys(city)) {
                                city = city[key];
                            }
                            return h("span", city);
                        }
                    },
                    {
                        title: "Birth",
                        key: "birth",
                        minWidth: 100
                    },
                    {
                        title: "Hobby",
                        key: "hobby",
                        minWidth: 100,
                        render: (h, params) => {
                            const hobby = params.row.hobby;
                            const hobbys = [];
                            for (const key of Object.keys(hobby)) {
                                hobbys.unshift(hobby[key]);
                            }
                            return h("span", hobbys.join());
                        }
                    },
                    {
                        title: "Operation",
                        key: "operation",
                        align: "center",
                        fixed: "right",
                        minWidth: 150,
                        render: (h, params) =>
                            h("div", [
                                h(
                                    "a",
                                    {
                                        style: {
                                            marginRight: "16px"
                                        },
                                        on: {
                                            click: () => this.handleEdit(params.row)
                                        }
                                    },
                                    [
                                        h("Icon", {
                                            props: {
                                                type: "md-create",
                                                size: 16
                                            },
                                            style: {
                                                marginTop: "-2px",
                                                marginRight: "4px"
                                            }
                                        }),
                                        "Edit"
                                    ]
                                ),
                                h(
                                    "Poptip",
                                    {
                                        props: {
                                            confirm: true,
                                            transfer: true,
                                            title: "Are you sure delete this task?",
                                            "ok-text": "yes",
                                            "cancel-text": "no"
                                        },
                                        on: {
                                            "on-ok": () => this.handleRemove(params.row)
                                        }
                                    },
                                    [
                                        h("a", [
                                            h("Icon", {
                                                props: {
                                                    type: "md-trash",
                                                    size: 16
                                                },
                                                style: {
                                                    marginTop: "-2px",
                                                    marginRight: "4px"
                                                }
                                            }),
                                            "Delete"
                                        ])
                                    ]
                                )
                            ])
                    }
                ]
            };
        },
        mounted() {
            this.handleDataList(); // 获取列表数据
        },
        methods: {
            /**
             * 获取用户列表
             * @param  {string} type 是否使用搜索, 默认值 undefined (不使用搜索)
             */
            handleDataList(type) {
                this.$refs["list"].selectAll(false); // 取消全选
                this.$Loading.start();
                this.list.loading = true; // 列表加载状态
                const page = this.$refs["list"].handlePage(type); // 获取分页信息
                // 模拟异步请求(搜索)
                setTimeout(() => {
                    _getUserList({
                        ...this.search,
                        pagePara: {
                            current: page.current,
                            pageSize: page.pageSize
                        }
                    })
                        .then(res => {
                            this.$Loading.finish();
                            const { users, total } = res.data;
                            this.list = {
                                data: users,
                                total: total,
                                loading: false
                            };
                        })
                        .catch(() => {
                            this.$Loading.error();
                            this.list.loading = false;
                        });
                }, 500);
            },
            // 新增界面
            handleCreate() {
                this.$refs["edit"].handleModal("Create"); // 显示创建模态框
            },
            /**
             * 编辑界面
             * @param  {object} row 当前行数据
             */
            handleEdit(row) {
                this.$refs["edit"].handleModal("Edit", row); // 显示编辑模态框
            },
            /**
             * 删除用户
             * @param  {object} row 当前行数据
             */
            handleRemove(row) {
                this.$Loading.start();
                this.list.loading = true;
                // 模拟异步请求(删除)
                setTimeout(() => {
                    _delUser({
                        id: row.id
                    })
                        .then(res => {
                            this.$Message.success(res.error.msg);
                            this.handleDataList();
                        })
                        .catch(() => {
                            this.$Loading.error();
                            this.list.loading = false;
                        });
                }, 500);
            },
            /**
             * 在多选模式下有效，只要选中项发生变化时就会触发
             * @param  {array} selection 已选项数据
             */
            handleSelectionChange(selection) {
                const ids = [];
                for (const item of selection) {
                    ids.push(item["id"]);
                }
                this.toolbar = {
                    ids: ids,
                    number: selection.length
                };
            },
            // 批量删除用户
            handleBatchRemove() {
                this.$Loading.start();
                this.list.loading = true;
                // 模拟异步请求(批量删除)
                setTimeout(() => {
                    _batchDelUser({
                        ids: this.toolbar.ids.join(",")
                    })
                        .then(res => {
                            this.$Message.success(res.error.msg);
                            this.handleDataList();
                        })
                        .catch(() => {
                            this.$Loading.error();
                            this.list.loading = false;
                        });
                }, 500);
            }
        }
    };
</script>
<style lang="postcss" scoped>
    .toolbar {
        margin-bottom: 24px;
        text-align: right;
    & .number {
          margin-right: 8px;
      }
    }
</style>
